import React, { Component } from 'react';
import noticeClassify from './NoticeClassify.module.css';
import { Row, Col, message, Modal, Input, Button, Select } from 'antd';
import { FormOutlined, ToTopOutlined, DeleteOutlined, ExclamationCircleOutlined, EllipsisOutlined } from '@ant-design/icons';
const { Option } = Select;
export default class NoticeClassify extends Component {
    constructor(props) {
        super(props);
        this.state = {
            noticeList: [
                { id: 1, name: '营销物料' },
                { id: 2, name: '政策发文' },
                { id: 3, name: '最新通知' },
                { id: 4, name: '公司制度' },
            ]
        }
    }
    showNewClassifyModule = () => {
        this.setState({
            isShowNewClassify: true
        })
    }
    handelNewChange = (e) => {
        let val = e.target.value.replace(/\s+/g, "")//获取属性值
        this.setState({
            newClassifyName: val
        })
    }
    confirmNew = () => {
        // 向服务器发起请求存储通知分类
        if (this.state.newClassifyName === undefined || this.state.newClassifyName === '') {
            message.error('请输入分类名字！！！')
        } else {
            // 向服务器发起请求存储通知分类
            this.setState({
                isShowNewClassify: false,
                newClassifyName: '',
            })

        }

    }
    handleNewCancel = () => {
        this.setState({
            isShowNewClassify: false,
            newClassifyName: '',
        })
    }
    // 置顶
    toTop = (id) => {
        let arr = JSON.parse(JSON.stringify(this.state.noticeList))
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].id === id) {
                let obj = arr[i];
                arr.splice(i, 1);
                arr.unshift(obj);
            }
        }
        this.setState({
            noticeList: arr
        }, () => {
            message.info('操作成功！！')
        })

    }
    // 修改分类
    editClassify = (id)=>{
        let arr = JSON.parse(JSON.stringify(this.state.noticeList))
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].id === id) {
                this.setState({
                    editClassify: arr[i].name,
                })
            }
        }
        this.setState({
            isShowEditClassify: true,
        })
    }
    handelEditChange = (e) => {
        let val = e.target.value.replace(/\s+/g, "")//获取属性值
        let name = e.target.name//获取表单元素的name属性
        this.setState({
            [name]: val
        })
    }
    confirmEdit = () => {
        console.log(this.state.editClassify, 66)
        if (this.state.editClassify === undefined || this.state.editClassify === '') {
            message.error('分类名称不能为空！！！')
        }
        else {
            // 向服务器发起请求存储修改的经销商
            this.setState({
                isShowEditClassify: false,
                editClassify: '',
            })
            message.info('操作成功！！')
        }

    }
    handleEditCancel = () => {
        this.setState({
            isShowEditClassify: false

        })
    }
    // 删除分类
    deleteClassify = (id) => {
        let arr = JSON.parse(JSON.stringify(this.state.noticeList))
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].id === id) {
                console.log(arr[i].name, 6666)
                this.setState({
                    nowClassify: arr[i].name,
                    nowId: arr[i].id,
                })
            }
        }
        this.setState({
            isShowDeleteClassify: true,
        })
    }
    handleSelectChange = (value) => {
        let arr = JSON.parse(JSON.stringify(this.state.noticeList))
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].id === value) {
                this.setState({
                    deleteNeedData: {
                        original: this.state.nowId,
                        target: arr[i].id,
                    }

                })
            }
        }
    }
    confirmDelete = () => {
        console.log(this.state.deleteNeedData, 6565)
        if (this.state.deleteNeedData === undefined) {
            message.error('移至分类不能为空')
        } else {
            // 向服务器发起请求
            this.setState({
                isShowDeleteClassify: false
            })
            message.info('操作成功！')
        }

    }
    handleDeleteCancel = () => {
        console.log(this.state.nowClassify, this.state.nowId, 555)
        this.setState({
            isShowDeleteClassify: false,
        })
    }
    render() {
        return (
            <div className={noticeClassify.content}>
                <Row className={noticeClassify.btnBox}>
                    <Col span={24}>
                        <Button type="primary" className={noticeClassify.newClassify}
                            onClick={this.showNewClassifyModule}>新增</Button>
                        <Modal
                            title="新增通知分类"
                            visible={this.state.isShowNewClassify}
                            onOk={this.confirmNew}
                            cancelText={'取消'}
                            okText={'确定'}
                            onCancel={this.handleNewCancel}
                        >
                            <div>
                                <span className={noticeClassify.newTips}> <span>*</span> 分类名称</span>
                                <Input className={noticeClassify.newClassifyName}
                                    value={this.state.newClassifyName} onChange={this.handelNewChange} />
                            </div>
                        </Modal>
                    </Col>
                </Row>
                <Row className={noticeClassify.dataHead}>
                    <Col span={24}>通知分类</Col>
                </Row>
                {this.state.noticeList.map(item =>
                    <Row className={noticeClassify.dataList} key={item.id}>
                        <Col span={12}>{item.name}</Col>
                        <Col span={12} className={noticeClassify.listOperate}>
                            <span className={noticeClassify.dot}><EllipsisOutlined /></span>
                            <div className={noticeClassify.operateBox}>
                                <button onClick={() => { this.editClassify(item.id) }}><FormOutlined className={noticeClassify.operateIcon} />修改</button>
                                <button onClick={() => { this.toTop(item.id) }}><ToTopOutlined className={noticeClassify.operateIcon} />置顶</button>
                                <button onClick={() => { this.deleteClassify(item.id) }}><DeleteOutlined className={noticeClassify.operateIcon} />删除</button>
                            </div>
                        </Col>
                    </Row>
                )}
                <Modal
                    // maskStyle={{ backgroundColor: 'rgba(0,0,0,.15)' }}
                    title="修改通知分类"
                    visible={this.state.isShowEditClassify}
                    onOk={this.confirmEdit}
                    cancelText={'取消'}
                    okText={'确定'}
                    onCancel={this.handleEditCancel}
                >
                    <div className={noticeClassify.inputBox}>
                        <span className={noticeClassify.newTips}> <span>*</span>分类名称</span>
                        <Input className={noticeClassify.newClassifyName} name='editClassify'
                            value={this.state.editClassify} onChange={this.handelEditChange} />
                    </div>
                </Modal>
                <Modal
                    // maskStyle={{ backgroundColor: 'rgba(0,0,0,.15)' }}
                    title={'删除' + '"' + (this.state.nowClassify ? this.state.nowClassify : '') + '"' + '分类'}
                    visible={this.state.isShowDeleteClassify}
                    onOk={this.confirmDelete}
                    cancelText={'取消'}
                    okText={'确定'}
                    onCancel={this.handleDeleteCancel}
                >
                    <p className={noticeClassify.deleteDescribe}><ExclamationCircleOutlined className={noticeClassify.describeIcon} />删除该分类需将此分类下的通知转移到以下分类</p>
                    <div className={noticeClassify.inputBox}>
                        <span className={noticeClassify.newTips}> <span>*</span>客户移至</span>
                        <Select defaultValue="请选择" className={noticeClassify.classifySelect} onChange={this.handleSelectChange}>
                            {this.state.noticeList.map(item => <Option key={item.id} value={item.id} disabled={this.state.nowId == item.id ? true : false}>{item.name}</Option>)}
                        </Select>
                    </div>
                </Modal>
            </div>
        )
    }
}
